{% extends "base.html" %}

{% block title %}我的书架 - 畅读小说网{% endblock %}

{% block content %}
<style>
    /* 整体容器样式 */
   .profile-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 个人中心头部样式 */
   .profile-header {
        text-align: center;
        margin-bottom: 40px;
    }

   .profile-header h1 {
        font-size: 2.5rem;
        font-weight: bold;
        color: #333;
    }

    /* 消息提示样式 */
   .messages {
        margin-bottom: 20px;
    }

   .alert {
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

   .alert-success {
        background-color: #d4edda;
        color: #155724;
    }

   .alert-error {
        background-color: #f8d7da;
        color: #721c24;
    }

    /* 个人中心内容样式 */
   .profile-content {
        display: flex;
        gap: 20px;
    }

    /* 侧边栏样式 */
   .profile-sidebar {
        width: 250px;
        background-color: #f9f9f9;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

   .user-avatar {
        text-align: center;
        margin-bottom: 20px;
    }

   .user-avatar img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
    }

   .default-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #007BFF;
        color: white;
        font-size: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

   .user-role {
        margin-top: 10px;
        color: #666;
    }

   .sidebar-menu ul {
        list-style-type: none;
        padding: 0;
    }

   .sidebar-menu li {
        margin-bottom: 10px;
    }

   .sidebar-menu li a {
        display: block;
        padding: 10px;
        border-radius: 5px;
        text-decoration: none;
        color: #333;
    }

   .sidebar-menu li a:hover {
        background-color: #e0e0e0;
    }

   .sidebar-menu li.active a {
        background-color: #007BFF;
        color: white;
    }

    /* 主内容样式 */
   .profile-main {
        flex: 1;
    }

   .profile-section {
        background-color: #fff;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

   .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

   .section-header h2 {
        font-size: 2rem;
        font-weight: bold;
        color: #333;
    }

   .section-actions .form-select {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
    }

    /* 书架网格样式 */
   .bookshelf-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }

   .bookshelf-item {
        display: flex;
        gap: 20px;
        background-color: #f9f9f9;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

   .book-cover {
        width: 100px;
        height: 150px;
        position: relative;
        overflow: hidden;
    }

   .book-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

   .no-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        color: #999;
    }

   .book-info {
        flex: 1;
    }

   .book-title {
        font-size: 1.3rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

   .book-author,
   .book-category {
        color: #666;
        margin-bottom: 5px;
    }

   .book-progress {
        margin-bottom: 10px;
    }

   .last-read {
        color: #666;
        margin-bottom: 5px;
    }

   .progress-bar {
        background-color: #e0e0e0;
        border-radius: 5px;
        height: 10px;
        overflow: hidden;
    }

   .progress {
        background-color: #007BFF;
        height: 100%;
    }

   .progress-text {
        color: #666;
        font-size: 0.9rem;
        margin-top: 5px;
    }

   .book-actions {
        display: flex;
        gap: 10px;
    }

   .btn-continue,
   .btn-start,
   .btn-remove,
   .btn.btn-primary,
   .page-link {
        padding: 8px 16px;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        background-color: #007BFF;
        color: white;
    }

   .btn-continue:hover,
   .btn-start:hover,
   .btn-remove:hover,
   .btn.btn-primary:hover,
   .page-link:hover {
        background-color: #0056b3;
    }

    /* 分页样式 */
   .pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40px;
    }

   .page-info {
        color: #666;
    }

   .page-links {
        display: flex;
        gap: 10px;
    }

   .page-link.current {
        background-color: #0056b3;
    }

    /* 空书架样式 */
   .empty-bookshelf {
        text-align: center;
        margin-top: 40px;
    }

   .empty-icon {
        font-size: 3rem;
        color: #999;
        margin-bottom: 20px;
    }

   .empty-bookshelf h3 {
        font-size: 1.5rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

   .empty-bookshelf p {
        color: #666;
        margin-bottom: 20px;
    }

    /* 模态框样式 */
   .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

   .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        border-radius: 5px;
        width: 300px;
    }

   .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

   .modal-header h3 {
        font-size: 1.2rem;
        font-weight: bold;
        color: #333;
    }

   .close {
        color: #aaa;
        font-size: 28px;
        font-weight: bold;
    }

   .close:hover,
   .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

   .modal-body p {
        color: #666;
        margin-bottom: 10px;
    }

   .text-muted {
        color: #999;
        font-size: 0.9rem;
    }

   .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

   .btn.btn-danger {
        background-color: #dc3545;
        color: white;
    }

   .btn.btn-danger:hover {
        background-color: #c82333;
    }

   .btn.btn-secondary {
        background-color: #6c757d;
        color: white;
    }

   .btn.btn-secondary:hover {
        background-color: #5a6268;
    }
</style>
<div class="profile-container">
    <div class="profile-header">
        <h1>个人中心</h1>
    </div>

    {% if messages %}
    <div class="messages">
        {% for message in messages %}
        <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
            {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="profile-content">
        <div class="profile-sidebar">
            <div class="user-avatar">
                {% if user.avatar %}
                    <img src="{{ user.avatar.url }}" alt="{{ user.username }}">
                {% else %}
                    <div class="default-avatar">{{ user.username|first|upper }}</div>
                {% endif %}
                <div class="user-role">{{ user.get_role_display }}</div>
            </div>
            <div class="sidebar-menu">
                <ul>
                    <li><a href="{% url 'user_profile' %}">个人信息</a></li>
                    <li><a href="{% url 'change_password' %}">修改密码</a></li>
                    <li class="active"><a href="{% url 'bookshelf' %}">我的书架</a></li>
                    {% if user.role == 'reader' %}
                    <li><a href="{% url 'author_apply' %}">申请成为作者</a></li>
                    {% endif %}
                    {% if user.role == 'author' %}
                    <li><a href="{% url 'author_center' %}">作家中心</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>

        <div class="profile-main">
            <div class="profile-section">
                <div class="section-header">
                    <h2>我的书架</h2>
                    <div class="section-actions">
                        <select id="bookshelf-sort" class="form-select">
                            <option value="updated">最近阅读</option>
                            <option value="added">添加时间</option>
                            <option value="title">书名排序</option>
                        </select>
                    </div>
                </div>

                {% if bookshelf_items %}
                <div class="bookshelf-grid">
                    {% for item in bookshelf_items %}
                    <div class="bookshelf-item">
                        <div class="book-cover">
                            {% if item.novel.cover %}
                                <img src="{{ item.novel.cover.url }}" alt="{{ item.novel.title }}">
                            {% else %}
                                <div class="no-cover">暂无封面</div>
                            {% endif %}
                        </div>
                        <div class="book-info">
                            <h3 class="book-title">{{ item.novel.title }}</h3>
                            <p class="book-author">{{ item.novel.author.username }}</p>
                            <p class="book-category">{{ item.novel.category.name }}</p>

                            <div class="book-progress">
                                {% if item.last_read_chapter %}
                                <p class="last-read">上次读到：{{ item.last_read_chapter.title }}</p>
                                <div class="progress-bar">
                                    <div class="progress" style="width: {{ item.progress_percentage }}%"></div>
                                </div>
                                <p class="progress-text">{{ item.progress_percentage }}% ({{ item.read_count }}/{{ item.total_chapters }})</p>
                                {% else %}
                                <p class="last-read">尚未开始阅读</p>
                                {% endif %}
                            </div>

                            <div class="book-actions">
                                {% if item.last_read_chapter %}
                                <a href="{% url 'read_chapter' item.novel.id item.last_read_chapter.id %}" class="btn-continue">继续阅读</a>
                                {% else %}
                                <a href="{% url 'novel_detail' item.novel.id %}" class="btn-start">开始阅读</a>
                                {% endif %}
                                <a href="javascript:void(0);" class="btn-remove" data-novel-id="{{ item.novel.id }}">移出书架</a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                {% if is_paginated %}
                <div class="pagination">
                    <span class="page-info">第 {{ page_obj.number }} 页 / 共 {{ page_obj.paginator.num_pages }} 页</span>
                    <div class="page-links">
                        {% if page_obj.has_previous %}
                        <a href="?page=1" class="page-link">&laquo; 首页</a>
                        <a href="?page={{ page_obj.previous_page_number }}" class="page-link">&lt; 上一页</a>
                        {% endif %}

                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                            <span class="page-link current">{{ num }}</span>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <a href="?page={{ num }}" class="page-link">{{ num }}</a>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                        <a href="?page={{ page_obj.next_page_number }}" class="page-link">下一页 &gt;</a>
                        <a href="?page={{ page_obj.paginator.num_pages }}" class="page-link">末页 &raquo;</a>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                {% else %}
                <div class="empty-bookshelf">
                    <div class="empty-icon">📚</div>
                    <h3>您的书架还是空的</h3>
                    <p>浏览小说并将喜欢的作品添加到书架中，开始您的阅读之旅吧！</p>
                    <a href="{% url 'novel_list' %}" class="btn btn-primary">浏览小说</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div id="remove-confirm" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>确认移出书架</h3>
            <span class="close">&times;</span>
        </div>
        <div class="modal-body">
            <p>确定要将这本小说从您的书架中移除吗？</p>
            <p class="text-muted">注意：移除后您的阅读进度将被清除。</p>
        </div>
        <div class="modal-footer">
            <button id="confirm-remove" class="btn btn-danger">确认移除</button>
            <button id="cancel-remove" class="btn btn-secondary">取消</button>
        </div>
    </div>
</div>

<script>
    // 移出书架确认对话框
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('remove-confirm');
        const closeBtn = modal.querySelector('.close');
        const cancelBtn = document.getElementById('cancel-remove');
        const confirmBtn = document.getElementById('confirm-remove');
        const removeButtons = document.querySelectorAll('.btn-remove');
        let currentNovelId = null;

        // 打开模态框
        removeButtons.forEach(button => {
            button.addEventListener('click', function() {
                currentNovelId = this.getAttribute('data-novel-id');
                modal.style.display = 'block';
            });
        });

        // 关闭模态框
        closeBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });

        cancelBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });

        // 点击确认移除
        confirmBtn.addEventListener('click', function() {
            if (currentNovelId) {
                // 发送AJAX请求移除书架
                fetch('/api/bookshelf/remove_from_bookshelf/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCookie('csrftoken')
                    },
                    body: JSON.stringify({
                        novel_id: currentNovelId
                    })
                })
               .then(response => response.json())
               .then(data => {
                    if (data.detail) {
                        // 刷新页面
                        window.location.reload();
                    }
                })
               .catch(error => {
                    console.error('Error:', error);
                });
            }
            modal.style.display = 'none';
        });

        // 点击模态框外部关闭
        window.addEventListener('click', function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        });

        // 获取CSRF Token
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        // 书架排序
        const sortSelect = document.getElementById('bookshelf-sort');
        if (sortSelect) {
            sortSelect.addEventListener('change', function() {
                const sortBy = this.value;
                window.location.href = `{% url 'bookshelf' %}?sort=${sortBy}`;
            });

            // 设置当前排序方式
            const urlParams = new URLSearchParams(window.location.search);
            const currentSort = urlParams.get('sort');
            if (currentSort) {
                sortSelect.value = currentSort;
            }
        }
    });
</script>
{% endblock %}    